<template>
	<div>
	<div class="agent">
		<div class="agent-1">
			<Select v-model="model2" size="small" style="width:100px">
				<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
			<input type="text" placeholder="请输入小区或商圈名称" />
			<span v-on:click="tiaozhuan">{{quxiao}}</span>
		</div>
	</div>
	 <div class="addres-2-1"></div>
	 <div class="addres-2">{{tuijian}}</div>
	 <div class="lianxi">
		 <div class="addres-4">
			 <div class="addre-5">{{tianxie}}</div>
			 <div class="addre-6"><input type="tel" placeholder="1556965324"/></div>
			 <div class="addre-7"><span v-on:click="success(true)">{{dingyue}}</span></div>
		 </div>
	 </div>
	  <div class="shop-1" v-for="(item,index) in model5">
	 		  <router-link to="/details/detail">
	 		  			<div class="shop-2"><img :src="item.imgSrc" /></div>
	 		  </router-link>
	 		  <div class="shop-3">
	 		  			  <div class="list1">{{item.title}}</div>
	 		  			  <div class="list2">{{item.xiangqing}}</div>
	 		  			  <div class="list3">
	 		  				 <div class="list3-1">{{item.dateTime}}</div>
	 		  				 <div class="list3-2">{{item.look}}</div>
	 		  			  </div>
	 		  			  <div class="list4"><span class="list4-1">{{item.price}}万元</span><span class="list4-2">{{item.place}}元/m²</span></div>
	 		  </div>
	 		
	 </div>
	<div class="dibu">
			  <div class="dibu-1">{{dibu}}</div>
	</div>
</div>

</template>

<script>
	export default {
		name: 'addres',
		data() {
			return {
				quxiao:"取消",
				tuijian:"为你推荐二手房",
				tianxie:"填写手机号，有新上房源,将第一时间通知你",
				dingyue:"免费订阅通知",
				dibu:"查看全部二手房源",
				cityList: [{
						value: 'ershoufang',
						label: '二手房'
					},
					{
						value: 'zufang',
						label: '租房'
					},

				],
				model2: '',  
					model5: [{
						shopimg: "",
						biaoti1: "中海.河山峻 3室2厅",
						biaoti2: "98.55m2/南/低楼层 共34层",
						biaoti3: "满两年",
						biaoti4: "随时可看",
						biaoti5: "2121万",
						biaoti6: "11,162元/平",
						tiao3:"/details/detail"
					}
				]
			}	

		},
		mounted() {
			this.$ajax({
					method: 'post',
					url: '/housing/hous'
				}).then((res)=> {
					this.model5=res.data;
					
				})
				.catch((err)=> {
					console.log(err)
				});
		},
		methods: {
			tiaozhuan() {
				this.$router.go(-1);
			},
			 success (nodesc) {
                this.$Notice.success({
                    title: '填写成功，有相关房源立即通知您！',
                    desc: nodesc ? '' : '填写成功 '
                });
            },
		},
		
	}
</script>
<style>
	.agent {
		width: 7.5rem;
		height: 0.99rem;
		display: flex;
		padding: 0.2rem 0.2rem;
		position: fixed;
		z-index: 999;
		background: white;
	}

	.agent-1 {
		width: 6.06rem;
		height: 0.57rem;
		background: gainsboro;
		border-radius: 0.08rem;
		display: flex;
		align-items: center;
	}

	input {
		width: 5rem;
		height: 0.57rem;
		margin-left: 0.1rem;
	}

	input::-webkit-input-placeholder {
		color: gray;
		font-size: 12px;
		padding: 0rem 0.3rem;
	}

	.agent-1>span {
		display: block;
		position: absolute;
		text-align: center;
		float: right;
		margin-right: 0.05rem;
		width: 1.2rem;
		height: 0.52rem;
		right: 0;
		font-size: 14px;
		color: gray;
		background: white;
	}
	.addres-2-1{
		width: 7.5rem;
		height: 1.2rem;
	}
	.addres-2{
		width: 7.5rem;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 14px;
		padding: 0rem 0.3rem;
		color: black;
	}
	.lianxi{
		width: 7.5rem;
		height: 4rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.addres-4{
		width: 6.76rem;
		height: 3.32rem;
		border: 1px solid gainsboro;
		border-radius: 0.1rem;
	}
	.addres-4>div{
		width: 6.76rem;
		height: 1rem;
	}
	.addre-5{
		line-height: 1rem;
		font-size: 12px;
		color: black;
		padding: 0rem 0.4rem;
	}
	.addre-6>input{
		margin-left: 0.2rem;
		border: none;
	}
	.addre-6>input::-webkit-input-placeholder{
		color: black;
		font-size: 14px;
	}
	.addre-7{
	 display:flex;
	 justify-content: center;
	 align-items: center;
	}
	.addre-7>span{
		display: block;
		width: 5.98rem;
		height: 0.94rem;
		background: #00ae66;
		color: white;
		font-size: 14px;
		 display:flex;
		justify-content: center;
		align-items: center;
	}
	.shop-1{
		width: 7.5rem;
		height: 2rem;
		margin-top: 0.6rem;
		display: flex;
	}
	.shop-2{
		width: 2.31rem;
		height: 2rem;
		padding: 0rem 0.2rem;
	}
	.shop-2>img{
		width: 2.31rem;
		height: 2rem;
	}
	.shop-3{
		width: 4.61rem;
		height: 2rem;
		margin-left: 0.5rem;
	}
	.shop-3>div{
		height: 0.51rem;
		width: 4.61rem;
	}
	.list1{
		color: #000000;
		font-size: 14px;
	}
	.list2{
		font-size: 12px;
		color: gray;
	}
	.list3{
		display: flex;
		font-size: 12px;
		color: gray;
	}
	.list4{
		font-size: 14px;
	}
	.list3-1{
	  font-size: 10px;
	  text-align: center;
	  color:#4ed6e4;
	  width: 1.2rem;
	  height: 0.34rem;
	  background: #e1f5f8;
	  border-radius: 0.05rem;
	}
	.list3-2{
	  font-size: 10px;
	  text-align: center;
	  color:#74d5ae;
	  width: 1.2rem;
	  height: 0.34rem;
	  background: #c3ecdc;
	  margin-left: 0.2rem;
	  border-radius: 0.05rem;
	}
	.list4-1{
		color:red;
	}
	.list4-2{
		color:gray;
		padding:0rem 0.2rem;
	}
	.dibu{
		margin-top: 0.4rem;
		width: 7.5rem;
		height: 3rem;
		padding: 0.4rem 0.55rem;
	}
	.dibu-1{
		width: 6.18rem;
		height:0.97rem ;
		background:#bbf1c5 ;
		line-height: 0.97rem;
		text-align: center;
		color: #07b868;
	}
</style>
